<template>
  <h2>MDescriptionBase 组件</h2>

  <h3>MDescriptionBase 属性</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>MDescriptionBase rows说明</h3>
  <table-info type="param" :data="paramTable"></table-info>

  <h3>案例</h3>
  <code-demo-mobile :code="htmlCode" :scriptCode="scriptCode">
    <m-description-base
      :data="data"
      :rows="rows"
      :labelStyle="{ width: '90px' }"
      :contentStyle="{ textAlign: 'left' }"
    >
      <template #regAuthority>我是contentSlot的内容</template>
    </m-description-base>
  </code-demo-mobile>
</template>

<script setup>
const rows = [
  { label: '登记机关', prop: 'regAuthority', contentSlot: 'regAuthority' },
  { label: '公告期', prop: 'announcementTerm' },
  { label: '异议申请人', prop: 'objectionApplyPerson' },
  { label: '异议时间', prop: 'objectionDate' },
  {
    label: '异议内容',
    prop: 'objectionContent',
    formatter: (content) => content || '我这里是formatter的内容哦',
  },
  { label: '简易注销结果', prop: 'briefCancelResult' },
  { label: '公告申请日期', prop: 'announcementApplyDate' },
  { label: '经营范围', prop: 'range' },
  { label: '经营范围2', prop: 'range', inline: false },
  { label: '经营范围3', prop: 'range', inline: false },
]

const data = {
  regAuthority: '登记机关',
  announcementTerm: '',
  objectionApplyPerson: '异议申请人',
  objectionDate: '异议时间',
  objectionContent: '',
  briefCancelResult: '简易注销结果',
  announcementApplyDate: '公告申请日期',
  range:
    '建筑装修工程、建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程',
}

// prettier-ignore
const propsTable = [
  { name: 'rows', desc: '配置', type: 'Array<{ label: string, prop?: string, content?: string, formatter?: Function, inline?: boolean, labelSlot?: string, contentSlot?: string }>', default: '', },
  { name: 'data', desc: '数据对象', type: 'Object', default: '', },
  { name: 'labelStyle', desc: '用于覆盖字段名的样式', type: 'Object', default: '', },
  { name: 'contentStyle', desc: '用于覆盖字段值的样式', type: 'Object', default: '', },
]

const paramTable = [
  { name: 'label', desc: '字段名', type: 'string', default: '' },
  { name: 'content', desc: '字段值', type: 'string', default: '' },
  { name: 'prop', desc: '如果没有content，则取data[col.prop]', type: 'string', default: '' },
  {
    name: 'formatter',
    desc: '对data[col.prop]进行格式化',
    type: 'function(content): string',
    default: '',
  },
  {
    name: 'inline',
    desc: '字段名与字段值是否在同一行，默认在同一行',
    type: 'boolean',
    default: 'true',
  },
  { name: 'labelSlot', desc: '字段值的插槽名', type: 'string', default: '' },
  { name: 'contentSlot', desc: '字段名的插槽名', type: 'string', default: '' },
]

const htmlCode = `<m-description-base
  :data="data"
  :rows="rows"
  :labelStyle="{ width: '90px' }"
  :contentStyle="{ textAlign: 'left' }"
>
  <template #regAuthority>我是contentSlot的内容</template>
</m-description-base>`

const scriptCode = `const rows = [
  { label: '登记机关', prop: 'regAuthority', contentSlot: 'regAuthority' },
  { label: '公告期', prop: 'announcementTerm' },
  { label: '异议申请人', prop: 'objectionApplyPerson' },
  { label: '异议时间', prop: 'objectionDate' },
  {
    label: '异议内容',
    prop: 'objectionContent',
    formatter: (content) => content || '我这里是formatter的内容哦',
  },
  { label: '简易注销结果', prop: 'briefCancelResult' },
  { label: '公告申请日期', prop: 'announcementApplyDate' },
  { label: '经营范围', prop: 'range' },
  { label: '经营范围2', prop: 'range', inline: false },
  { label: '经营范围3', prop: 'range', inline: false },
]

const data = {
  regAuthority: '登记机关',
  announcementTerm: '',
  objectionApplyPerson: '异议申请人',
  objectionDate: '异议时间',
  objectionContent: '',
  briefCancelResult: '简易注销结果',
  announcementApplyDate: '公告申请日期',
  range:
    '建筑装修工程、建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程建筑装修工程',
}`
</script>
